<template>
  <div class="layout-demo">
    <h2 class="section-title">Flex 与 Grid 现代布局</h2>
    <p class="section-intro">
      Flexbox 和 CSS Grid 是现代 CSS 布局的两大核心技术，它们为复杂布局提供了强大而灵活的解决方案。
    </p>

    <div class="layout-tabs">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        @click="activeTab = tab.id"
        :class="{ active: activeTab === tab.id }"
        class="tab-button"
      >
        {{ tab.title }}
      </button>
    </div>

    <!-- Flexbox 部分 -->
    <div v-if="activeTab === 'flex'" class="tab-content">
      <div class="demo-grid">
        <!-- Flex 基础 -->
        <div class="demo-card">
          <h3>Flexbox 基础概念</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* 创建 Flex 容器 */
.flex-container {
  display: flex;
  /* 主轴方向 */
  flex-direction: row; /* row | column | row-reverse | column-reverse */
  /* 换行 */
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
  /* 主轴对齐 */
  justify-content: flex-start; /* flex-start | center | flex-end | space-between | space-around | space-evenly */
  /* 交叉轴对齐 */
  align-items: stretch; /* stretch | flex-start | center | flex-end | baseline */
}</code></pre>
            </div>
            <div class="demo-result">
              <div class="flex-controls">
                <div class="control-group">
                  <label>flex-direction:</label>
                  <select v-model="flexSettings.direction">
                    <option value="row">row</option>
                    <option value="column">column</option>
                    <option value="row-reverse">row-reverse</option>
                    <option value="column-reverse">column-reverse</option>
                  </select>
                </div>
                <div class="control-group">
                  <label>justify-content:</label>
                  <select v-model="flexSettings.justify">
                    <option value="flex-start">flex-start</option>
                    <option value="center">center</option>
                    <option value="flex-end">flex-end</option>
                    <option value="space-between">space-between</option>
                    <option value="space-around">space-around</option>
                    <option value="space-evenly">space-evenly</option>
                  </select>
                </div>
                <div class="control-group">
                  <label>align-items:</label>
                  <select v-model="flexSettings.align">
                    <option value="stretch">stretch</option>
                    <option value="flex-start">flex-start</option>
                    <option value="center">center</option>
                    <option value="flex-end">flex-end</option>
                    <option value="baseline">baseline</option>
                  </select>
                </div>
              </div>
              <div
                class="flex-container-demo"
                :style="{
                  flexDirection: flexSettings.direction,
                  justifyContent: flexSettings.justify,
                  alignItems: flexSettings.align,
                }"
              >
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Flex 项目属性 -->
        <div class="demo-card">
          <h3>Flex 项目属性</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* Flex 项目属性 */
.flex-item {
  /* 放大比例 */
  flex-grow: 0; /* 默认0，不放大 */
  /* 缩小比例 */
  flex-shrink: 1; /* 默认1，等比缩小 */
  /* 基础大小 */
  flex-basis: auto; /* auto | 具体值 */
  /* 简写 */
  flex: 0 1 auto; /* flex-grow flex-shrink flex-basis */
  /* 单独对齐 */
  align-self: auto; /* auto | flex-start | center | flex-end | stretch | baseline */
}</code></pre>
            </div>
            <div class="demo-result">
              <div class="flex-item-demo">
                <div class="flex-container-items">
                  <div
                    class="flex-item-control"
                    :style="{ flex: `${item.grow} ${item.shrink} ${item.basis}` }"
                    v-for="(item, index) in flexItems"
                    :key="index"
                  >
                    Item {{ index + 1 }}
                    <div class="item-controls">
                      <label
                        >grow: <input type="number" v-model.number="item.grow" min="0" max="5"
                      /></label>
                      <label
                        >shrink: <input type="number" v-model.number="item.shrink" min="0" max="5"
                      /></label>
                      <label>basis: <input v-model="item.basis" placeholder="auto" /></label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Flex 实用案例 -->
        <div class="demo-card">
          <h3>Flexbox 实用案例</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* 案例1: 水平垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 案例2: 等高列布局 */
.equal-height {
  display: flex;
  align-items: stretch;
}

/* 案例3: 底部对齐 */
.bottom-align {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}</code></pre>
            </div>
            <div class="demo-result">
              <div class="flex-cases">
                <div class="case-item">
                  <h4>水平垂直居中</h4>
                  <div class="center-case">
                    <div class="centered-content">居中内容</div>
                  </div>
                </div>
                <div class="case-item">
                  <h4>等高列布局</h4>
                  <div class="equal-height-case">
                    <div class="column">短内容</div>
                    <div class="column">这是一个比较长的内容，用来演示等高效果</div>
                    <div class="column">中等内容长度</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Grid 部分 -->
    <div v-if="activeTab === 'grid'" class="tab-content">
      <div class="demo-grid">
        <!-- Grid 基础 -->
        <div class="demo-card">
          <h3>CSS Grid 基础</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* 创建 Grid 容器 */
.grid-container {
  display: grid;
  /* 定义列 */
  grid-template-columns: 1fr 2fr 1fr; /* 或 repeat(3, 1fr) */
  /* 定义行 */
  grid-template-rows: 100px auto 100px;
  /* 间距 */
  gap: 10px; /* 或 grid-gap */
  /* 对齐 */
  justify-items: stretch; /* start | end | center | stretch */
  align-items: stretch; /* start | end | center | stretch */
}</code></pre>
            </div>
            <div class="demo-result">
              <div class="grid-controls">
                <div class="control-group">
                  <label>columns:</label>
                  <select v-model="gridSettings.columns">
                    <option value="1fr 1fr 1fr">1fr 1fr 1fr</option>
                    <option value="1fr 2fr 1fr">1fr 2fr 1fr</option>
                    <option value="repeat(4, 1fr)">repeat(4, 1fr)</option>
                    <option value="100px 1fr 100px">100px 1fr 100px</option>
                  </select>
                </div>
                <div class="control-group">
                  <label>rows:</label>
                  <select v-model="gridSettings.rows">
                    <option value="auto auto auto">auto auto auto</option>
                    <option value="100px 1fr 50px">100px 1fr 50px</option>
                    <option value="repeat(3, 100px)">repeat(3, 100px)</option>
                  </select>
                </div>
                <div class="control-group">
                  <label>gap:</label>
                  <input type="range" v-model="gridSettings.gap" min="0" max="30" />
                  <span>{{ gridSettings.gap }}px</span>
                </div>
              </div>
              <div
                class="grid-container-demo"
                :style="{
                  gridTemplateColumns: gridSettings.columns,
                  gridTemplateRows: gridSettings.rows,
                  gap: gridSettings.gap + 'px',
                }"
              >
                <div class="grid-item" v-for="n in 9" :key="n">{{ n }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Grid 项目定位 -->
        <div class="demo-card">
          <h3>Grid 项目定位</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* Grid 项目定位 */
.grid-item {
  /* 列位置 */
  grid-column-start: 1;
  grid-column-end: 3;
  /* 简写 */
  grid-column: 1 / 3; /* 或 1 / span 2 */
  
  /* 行位置 */
  grid-row: 2 / 4;
  
  /* 区域简写 */
  grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
}</code></pre>
            </div>
            <div class="demo-result">
              <div class="grid-positioning-demo">
                <div class="grid-container-positioning">
                  <div class="grid-item-pos item-1">Header</div>
                  <div class="grid-item-pos item-2">Sidebar</div>
                  <div class="grid-item-pos item-3">Main</div>
                  <div class="grid-item-pos item-4">Footer</div>
                </div>
                <div class="positioning-code">
                  <pre><code>.item-1 { grid-area: 1 / 1 / 2 / 4; } /* Header */
.item-2 { grid-area: 2 / 1 / 3 / 2; } /* Sidebar */
.item-3 { grid-area: 2 / 2 / 3 / 4; } /* Main */
.item-4 { grid-area: 3 / 1 / 4 / 4; } /* Footer */</code></pre>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Grid 模板区域 -->
        <div class="demo-card">
          <h3>Grid 模板区域</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* 使用命名区域 */
.grid-template {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 60px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }</code></pre>
            </div>
            <div class="demo-result">
              <div class="grid-template-demo">
                <div class="header-area">Header</div>
                <div class="sidebar-area">Sidebar</div>
                <div class="main-area">Main Content</div>
                <div class="footer-area">Footer</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Grid 实用案例 -->
        <div class="demo-card">
          <h3>Grid 实用案例</h3>
          <div class="code-example">
            <div class="code-block">
              <pre><code>/* 案例1: 响应式卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* 案例2: 圣杯布局 */
.holy-grail {
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 150px 1fr 150px;
  grid-template-rows: auto 1fr auto;
}</code></pre>
            </div>
            <div class="demo-result">
              <div class="grid-cases">
                <div class="case-item">
                  <h4>响应式卡片网格</h4>
                  <div class="card-grid-case">
                    <div class="card">卡片 1</div>
                    <div class="card">卡片 2</div>
                    <div class="card">卡片 3</div>
                    <div class="card">卡片 4</div>
                  </div>
                </div>
                <div class="case-item">
                  <h4>圣杯布局</h4>
                  <div class="holy-grail-case">
                    <div class="hg-header">Header</div>
                    <div class="hg-nav">Nav</div>
                    <div class="hg-main">Main</div>
                    <div class="hg-aside">Aside</div>
                    <div class="hg-footer">Footer</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 对比部分 -->
    <div v-if="activeTab === 'comparison'" class="tab-content">
      <div class="comparison-content">
        <h3>Flexbox vs Grid 对比</h3>

        <div class="comparison-table">
          <div class="comparison-row header">
            <div class="comparison-cell">特性</div>
            <div class="comparison-cell">Flexbox</div>
            <div class="comparison-cell">Grid</div>
          </div>
          <div class="comparison-row">
            <div class="comparison-cell">维度</div>
            <div class="comparison-cell">一维布局 (行或列)</div>
            <div class="comparison-cell">二维布局 (行和列)</div>
          </div>
          <div class="comparison-row">
            <div class="comparison-cell">适用场景</div>
            <div class="comparison-cell">组件内部布局、导航栏</div>
            <div class="comparison-cell">页面整体布局、复杂网格</div>
          </div>
          <div class="comparison-row">
            <div class="comparison-cell">内容驱动</div>
            <div class="comparison-cell">✅ 内容决定布局</div>
            <div class="comparison-cell">❌ 布局决定内容</div>
          </div>
          <div class="comparison-row">
            <div class="comparison-cell">浏览器支持</div>
            <div class="comparison-cell">✅ 优秀</div>
            <div class="comparison-cell">✅ 良好 (IE11+)</div>
          </div>
          <div class="comparison-row">
            <div class="comparison-cell">学习难度</div>
            <div class="comparison-cell">⭐⭐⭐ 中等</div>
            <div class="comparison-cell">⭐⭐⭐⭐ 较高</div>
          </div>
        </div>

        <div class="usage-guide">
          <div class="guide-section">
            <h4>🎯 何时使用 Flexbox</h4>
            <ul>
              <li>导航栏布局</li>
              <li>卡片内部元素对齐</li>
              <li>垂直居中</li>
              <li>等高列布局</li>
              <li>工具栏按钮排列</li>
            </ul>
          </div>
          <div class="guide-section">
            <h4>🎯 何时使用 Grid</h4>
            <ul>
              <li>页面整体布局</li>
              <li>复杂的网格系统</li>
              <li>重叠元素布局</li>
              <li>响应式设计</li>
              <li>表格式数据展示</li>
            </ul>
          </div>
        </div>

        <div class="practical-example">
          <h4>实际应用示例</h4>
          <div class="example-layout">
            <div class="layout-header">
              <div class="logo">Logo</div>
              <nav class="nav-flex">
                <a href="#">首页</a>
                <a href="#">产品</a>
                <a href="#">关于</a>
                <a href="#">联系</a>
              </nav>
              <div class="user-actions">
                <button>登录</button>
                <button>注册</button>
              </div>
            </div>
            <div class="layout-body">
              <aside class="sidebar">侧边栏</aside>
              <main class="main-content">
                <div class="content-grid">
                  <div class="content-card">内容卡片 1</div>
                  <div class="content-card">内容卡片 2</div>
                  <div class="content-card">内容卡片 3</div>
                  <div class="content-card">内容卡片 4</div>
                </div>
              </main>
            </div>
            <footer class="layout-footer">Footer</footer>
          </div>
          <div class="example-explanation">
            <p><strong>布局说明：</strong></p>
            <ul>
              <li>Header 使用 Flexbox 实现导航栏布局</li>
              <li>整体页面使用 Grid 实现三行布局</li>
              <li>Body 部分使用 Grid 实现侧边栏+主内容</li>
              <li>主内容区域使用 Grid 实现响应式卡片布局</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="layout-tips">
      <h3>布局最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎯 选择合适的布局方式</h4>
          <ul>
            <li>一维布局优先考虑 Flexbox</li>
            <li>二维布局优先考虑 Grid</li>
            <li>可以组合使用两种技术</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>📱 响应式设计</h4>
          <ul>
            <li>使用 fr 单位实现弹性布局</li>
            <li>利用 minmax() 函数</li>
            <li>使用 auto-fit 和 auto-fill</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>⚡ 性能优化</h4>
          <ul>
            <li>避免不必要的嵌套</li>
            <li>合理使用 gap 属性</li>
            <li>注意重排和重绘</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>🔧 调试技巧</h4>
          <ul>
            <li>使用浏览器开发者工具</li>
            <li>Firefox Grid Inspector</li>
            <li>Chrome Flexbox Inspector</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('flex')

const tabs = [
  { id: 'flex', title: 'Flexbox' },
  { id: 'grid', title: 'CSS Grid' },
  { id: 'comparison', title: '对比分析' },
]

const flexSettings = ref({
  direction: 'row',
  justify: 'flex-start',
  align: 'stretch',
})

const flexItems = ref([
  { grow: 0, shrink: 1, basis: 'auto' },
  { grow: 1, shrink: 1, basis: 'auto' },
  { grow: 0, shrink: 1, basis: 'auto' },
])

const gridSettings = ref({
  columns: '1fr 1fr 1fr',
  rows: 'auto auto auto',
  gap: 10,
})
</script>

<style scoped lang="scss">
.layout-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #673ab7;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .layout-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e0e0e0;

    .tab-button {
      padding: 12px 24px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 1rem;
      color: #666;
      border-bottom: 3px solid transparent;
      transition: all 0.3s;

      &:hover {
        color: #673ab7;
        background: #f3e5f5;
      }

      &.active {
        color: #673ab7;
        border-bottom-color: #673ab7;
        background: #f3e5f5;
      }
    }
  }

  .tab-content {
    min-height: 600px;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #673ab7;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .layout-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #f3e5f5;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #673ab7;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #4a148c;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// Flex 演示样式
.flex-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;

  .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    label {
      font-weight: 500;
      font-size: 0.9rem;
    }

    select {
      padding: 6px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  }
}

.flex-container-demo {
  display: flex;
  min-height: 150px;
  border: 2px dashed #673ab7;
  background: #f9f9f9;
  padding: 10px;
  gap: 10px;

  .flex-item {
    background: #e1bee7;
    border: 2px solid #673ab7;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    min-width: 60px;
    border-radius: 4px;
  }
}

.flex-item-demo {
  .flex-container-items {
    display: flex;
    gap: 10px;
    min-height: 120px;
    border: 2px dashed #673ab7;
    background: #f9f9f9;
    padding: 10px;
  }

  .flex-item-control {
    background: #e1bee7;
    border: 2px solid #673ab7;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 100px;

    .item-controls {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 0.7rem;

      label {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      input {
        width: 50px;
        padding: 2px;
        font-size: 0.7rem;
      }
    }
  }
}

.flex-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;

  .case-item {
    h4 {
      margin: 0 0 0.5rem 0;
      color: #333;
      font-size: 1rem;
    }
  }

  .center-case {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;

    .centered-content {
      background: #e1bee7;
      padding: 10px 20px;
      border-radius: 4px;
      border: 2px solid #673ab7;
    }
  }

  .equal-height-case {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-height: 100px;

    .column {
      flex: 1;
      background: #e1bee7;
      border: 2px solid #673ab7;
      padding: 10px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
}

// Grid 演示样式
.grid-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;

  .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    label {
      font-weight: 500;
      font-size: 0.9rem;
    }

    select,
    input {
      padding: 6px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    input[type='range'] {
      flex: 1;
    }

    span {
      font-size: 0.9rem;
      color: #666;
    }
  }
}

.grid-container-demo {
  display: grid;
  min-height: 200px;
  border: 2px dashed #673ab7;
  background: #f9f9f9;
  padding: 10px;

  .grid-item {
    background: #e1bee7;
    border: 2px solid #673ab7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 4px;
    min-height: 40px;
  }
}

.grid-positioning-demo {
  .grid-container-positioning {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 60px 120px 60px;
    gap: 10px;
    height: 250px;

    .grid-item-pos {
      background: #e1bee7;
      border: 2px solid #673ab7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      border-radius: 4px;
    }

    .item-1 {
      grid-area: 1 / 1 / 2 / 4;
    }
    .item-2 {
      grid-area: 2 / 1 / 3 / 2;
    }
    .item-3 {
      grid-area: 2 / 2 / 3 / 4;
    }
    .item-4 {
      grid-area: 3 / 1 / 4 / 4;
    }
  }

  .positioning-code {
    margin-top: 1rem;
    background: #2d3748;
    border-radius: 6px;
    padding: 1rem;

    pre {
      margin: 0;
      color: #e2e8f0;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
      line-height: 1.4;
    }
  }
}

.grid-template-demo {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 60px 120px 60px;
  gap: 10px;
  height: 250px;

  .header-area {
    grid-area: header;
    background: #ffcdd2;
    border: 2px solid #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 4px;
  }

  .sidebar-area {
    grid-area: sidebar;
    background: #c8e6c9;
    border: 2px solid #4caf50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 4px;
  }

  .main-area {
    grid-area: main;
    background: #e1f5fe;
    border: 2px solid #03a9f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 4px;
  }

  .footer-area {
    grid-area: footer;
    background: #fff3e0;
    border: 2px solid #ff9800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 4px;
  }
}

.grid-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;

  .case-item {
    h4 {
      margin: 0 0 1rem 0;
      color: #333;
      font-size: 1rem;
    }
  }

  .card-grid-case {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;

    .card {
      background: #e1bee7;
      border: 2px solid #673ab7;
      padding: 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      min-height: 60px;
    }
  }

  .holy-grail-case {
    display: grid;
    grid-template-areas:
      'header header header'
      'nav main aside'
      'footer footer footer';
    grid-template-columns: 80px 1fr 80px;
    grid-template-rows: 40px 80px 40px;
    gap: 5px;
    height: 170px;

    .hg-header {
      grid-area: header;
      background: #ffcdd2;
      border: 1px solid #f44336;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      border-radius: 2px;
    }

    .hg-nav {
      grid-area: nav;
      background: #c8e6c9;
      border: 1px solid #4caf50;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      border-radius: 2px;
    }

    .hg-main {
      grid-area: main;
      background: #e1f5fe;
      border: 1px solid #03a9f4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      border-radius: 2px;
    }

    .hg-aside {
      grid-area: aside;
      background: #f3e5f5;
      border: 1px solid #9c27b0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      border-radius: 2px;
    }

    .hg-footer {
      grid-area: footer;
      background: #fff3e0;
      border: 1px solid #ff9800;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      border-radius: 2px;
    }
  }
}

// 对比部分样式
.comparison-content {
  h3 {
    margin: 0 0 2rem 0;
    color: #673ab7;
    font-size: 1.5rem;
    text-align: center;
  }

  .comparison-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;

    .comparison-row {
      display: contents;

      &.header .comparison-cell {
        background: #673ab7;
        color: white;
        font-weight: 600;
      }
    }

    .comparison-cell {
      background: white;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }

  .usage-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;

    .guide-section {
      background: #f3e5f5;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #673ab7;

      h4 {
        margin: 0 0 1rem 0;
        color: #4a148c;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.5rem;
          color: #666;
          line-height: 1.4;
        }
      }
    }
  }

  .practical-example {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
      font-size: 1.2rem;
    }

    .example-layout {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 300px;
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;

      .layout-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #673ab7;
        color: white;
        padding: 1rem;

        .logo {
          font-weight: 600;
        }

        .nav-flex {
          display: flex;
          gap: 1rem;

          a {
            color: white;
            text-decoration: none;
            padding: 0.5rem;
            border-radius: 4px;
            transition: background 0.2s;

            &:hover {
              background: rgba(255, 255, 255, 0.1);
            }
          }
        }

        .user-actions {
          display: flex;
          gap: 0.5rem;

          button {
            padding: 0.5rem 1rem;
            border: 1px solid white;
            background: transparent;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              background: white;
              color: #673ab7;
            }
          }
        }
      }

      .layout-body {
        display: grid;
        grid-template-columns: 200px 1fr;
        flex: 1;

        .sidebar {
          background: #f5f5f5;
          padding: 1rem;
          border-right: 1px solid #ddd;
        }

        .main-content {
          padding: 1rem;

          .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;

            .content-card {
              background: #e1bee7;
              border: 1px solid #673ab7;
              padding: 1rem;
              border-radius: 4px;
              text-align: center;
              min-height: 80px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }

      .layout-footer {
        background: #f5f5f5;
        padding: 1rem;
        text-align: center;
        border-top: 1px solid #ddd;
      }
    }

    .example-explanation {
      margin-top: 1rem;
      padding: 1rem;
      background: #f9f9f9;
      border-radius: 6px;

      p {
        margin: 0 0 0.5rem 0;
        font-weight: 500;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          font-size: 0.9rem;
          color: #666;
        }
      }
    }
  }
}
</style>
